<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no,maximum-scale=1" />
    <meta content="yes" name="apple-mobile-web-app-capable" />
    <meta content="black" name="apple-mobile-web-app-status-bar-style" />
    <meta content="telephone=no" name="format-detection" />
    <link rel="shortcut icon" href="/blog/Public/favicon.ico" type="image/x-icon" />
    <title>我的博客 - 一个前端程序员的个人博客！</title>
    <meta name="keywords" content="小木鱼,小木鱼博客,birongsen,前端工程师,博客,thinkphp"/>     
    <meta name="description" content="分享前端、JavaScript、ThinkPHP和web的各个细节上的点点滴滴，愿与你共同分享，一起进步！"/>
    <link rel="stylesheet" href="Public/layui/css/layui.css">
    <link rel="stylesheet" href="//at.alicdn.com/t/font_244737_u9w8n2sqi1rcz0k9.css">
    <style type="text/css">
        /*404页面*/
        .noFind{ text-align:center; padding-top:2%;}
        .noFind i{ line-height:1em; font-size:12em !important; color: #393D50; display:block;}
        .ufo{ text-align:center; height:100%; position:relative;}
        .noFind .page_icon,.noFind .ufo_icon{ opacity:1; position:absolute; left:50%; transform:translateX(-50%); -ms-transform:translateX(-50%); -moz-transform:translateX(-50%); -webkit-transform:translateX(-50%); -o-transform:translateX(-50%);}
        .noFind .page_icon{ top:300px; animation:pageGo 0.3s ease-in 0.3s forwards; -webkit-animation:pageGo 0.3s ease-in 0.3s forwards; -o-animation:pageGo 0.3s ease-in 0.3s forwards; -moz-animation:pageGo 0.3s ease-in 0.3s forwards;}
        .noFind .ufo_icon{ top:100px; animation:ufo 1s ease-in 0.6s forwards; -webkit-animation:ufo 1s ease-in 0.6s forwards; -o-animation:ufo 1s ease-in 0.6s forwards; -moz-animation:ufo 1s ease-in 0.6s forwards;}
        .page404{ margin-top:10%; opacity:0; font-size:0; animation:page404 0.5s ease-in 1.7s forwards; -webkit-animation:page404 0.5s ease-in 1.7s forwards; -o-animation:page404 0.5s ease-in 1.7s forwards; -moz-animation:page404 0.5s ease-in 1.7s forwards;}
        .page404 p{ font-size: 20px; font-weight: 300; color: #999;}
        /*页面被吸走*/
        @keyframes pageGo{from{font-size: 12em; top:300px;} to{font-size:0; opacity:0; top: 100px;}}
        @-moz-keyframes pageGo{from{font-size: 12em; top:300px;} to{font-size:0; opacity:0; top:100px}}
        @-webkit-keyframes pageGo{from{font-size: 12em; top:300px;} to{font-size:0; opacity:0; top:100px}}
        @-o-keyframes pageGo{from{font-size: 12em; top:300px;} to{font-size:0; opacity:0; top:100px}}
        /*ufo飞走*/
        @keyframes ufo{0%{font-size: 14em; top:100px;} 20%{font-size: 12em; top:50px;} 100%{font-size:0; opacity:0; top:-100px; left:80%;}}
        @-moz-keyframes ufo{0%{font-size: 14em; top:100px;} 20%{font-size: 12em;  top:50px;} 100%{font-size:0; opacity:0; top:-100px; left:80%;}}
        @-webkit-keyframes ufo{0%{font-size: 14em; top:100px;} 20%{font-size: 12em;  top:50px;} 100%{font-size:0; opacity:0; top:-100px; left:80%;}}
        @-o-keyframes ufo{0%{font-size: 14em; top:100px;} 20%{font-size: 12em; top:50px;} 100%{font-size:0; opacity:0; top:-100px; left:80%;}}
        /*404显示*/
        @keyframes page404{from{opacity:0; font-size:2em;} to{opacity:1;font-size:2em;}}
        @-moz-keyframes page404{from{opacity:0; font-size:2em;} to{opacity:1;font-size:2em;}}
        @-webkit-keyframes page404{from{opacity:0; font-size:2em;} to{opacity:1;font-size:2em;}}
        @-o-keyframes page404{from{opacity:0; font-size:2em;} to{opacity:1;font-size:2em;}}
    </style>
</head>
<body style="padding:15px 0;overflow: hidden;">
    <div class="noFind">
        <div class="ufo">
            <i class="iconfont icon-ufo ufo_icon"></i>
            <i class="layui-icon page_icon">&#xe638;</i>
        </div>
        <div class="page404">
            <i class="layui-icon">&#xe61c;</i>
            <p>我勒个去，页面被外星人挟持了!</p>
            <p><a href="javascript:history.go(-1);location.reload();">返回上一页</a></p>
        </div>
    </div>
</body>
</html>